<template>
	<div class="app-container">
		<jk-operation-card ref="box1" class="margin-bottom-10">
			<div class="flex-between-center-wrap">
				<div class="flex-start-center-wrap">
					<div v-for="(item, index) in backgroundColorList" :key="index" style="display: flex; align-items: flex-end; padding-right: 20px">
						<div :style="{ background: `${item.color}`, width: '20px', height:'20px', borderRadius: '4px', marginRight: '8px' }"></div>
						<div>{{ item.name }}</div>
					</div>
				</div>
				<div class="flex-end-center-wrap">
					<div class="flex-end-center-wrap">
						<div class="flex-center">
							<jk-select
								v-model="searchParams.workshopId"
								:option-list="workshopList"
								placeholder="区域"
								size="small"
								:clearable="false"
								class="search-bar-item-size1 margin-5-0 item-gap"
								@change="onChangeBtn"
							></jk-select>
							<jk-select
								v-model="searchParams.processCode"
								value-key-name="code"
								:option-list="garbledProcess"
								size="small"
								:clearable="false"
								placeholder="工序"
								class="search-bar-item-size1 margin-5-0 item-gap"
							></jk-select>
							<el-date-picker
								v-model="searchParams.yearMonth"
								class="item-gap"
								:clearable="false"
								:picker-options="pickerOptions"
								size="small"
								style="width: 120px; margin: 0 0 0 5px"
								type="month"
								value-format="yyyy-MM"
								placeholder="月"
							/>
						</div>
						<jk-search-button @click="onSearchBtn"></jk-search-button>
					</div>
				</div>
			</div>
		</jk-operation-card>
		<jk-card>
			<jk-table
				ref="jkTable"
				:loading="tableLoading"
				:data="tableData"
				:height="tableHeight + 20"
			>
				<div
					v-for="(item, index) in tableHeader"
					:key="index"
				>
					<vxe-colgroup
						v-if="typeof item.key !== 'string'"
						:title="item.value"
						:field="typeof item.key !== 'string' ? 'aaa': item.key"
						:align="item.align"
						:width="item.width"
					>
						<vxe-column
							v-for="(childItem, childIndex) in item.key"
							:key="childIndex"
							:field="childItem.key"
							:title="childItem.value"
							:align="item.align"
							:width="110"
						>
						</vxe-column>
					</vxe-colgroup>
					<vxe-column
						v-else
						:title="item.value"
						:fixed="item.fixed ? item.fixed : ''"
						:field="typeof item.key !== 'string' ? 'aaa': item.key"
						:align="item.align"
						:min-width="item.width"
					>
						<template slot-scope="scope">
							<span v-if="item.key === 'machineName'">
								<div style="display: flex; flex-direction: column;">
									{{ scope.row.machineName }}
								</div>
							</span>
							<li v-else :style="{ backgroundColor: `${ scope.row[item.key].backgroundColor }`, listStyleType: 'none', borderRadius: '4px' }">{{ scope.row[item.key].itemName }}</li>
						</template>
					</vxe-column>
				</div>
			</jk-table>
		</jk-card>
	</div>
</template>

<script>
    import calHeight from '/src/mixins/cal-table-height';
    import handlerCache from '@/mixins/handler-cache';
    import { pageConfig, formatMonth, formatDate, tipsBar } from '/src/utils/jk/jk-tool';
    import { machineManagerUpkeepMachineJobGetMonthUpKeepMachineJob } from '@/api/machine/upkeepMonthRecord';
    export default {
        name: 'WorkshopArea',
        mixins: [calHeight, handlerCache],
        data() {
            return {
                prefix: 'spin:qualityInspectionRecord',
                apiItem: {
                    'page': machineManagerUpkeepMachineJobGetMonthUpKeepMachineJob
                },
                pickerOptions: {
                    // disabledDate(time) {
                    //     return time.getTime() > Date.now();
                    // }
                },
                backgroundColorList: [
                    {
                        name: '计划中',
                        color: '#FF9900'
                    },
                    {
                        name: '到期',
                        color: '#e43e30'
                    },
                    {
                        name: '保养中',
                        color: '#5cadff'
                    },
                    {
                        name: '保养完成',
                        color: '#19BE6B'
                    }
                ],
                processList: [],
                workshopList: [],
                garbledProcess: [],
                tableHeader: [],
                tableLoading: true,
                tableData: [],
                searchParams: {
                    yearMonth: ''
                }
            };
        },
        methods: {
            onChangeBtn(val) {
                this.$set(this.searchParams, 'processCode', undefined);
                this.getProcessData(val);
            },
            getProcessData(val) {
                this.garbledProcess = [];
                this.processList.forEach(y => {
                    if (val === y.workshopId) {
                        this.garbledProcess.push(y);
                    }
                });
            },
            /** 查询列表 */
            getListRequest() {
                this.tableLoading = true;
                this.tableHeader = [];
                this.tableData = [];
                this.apiItem.page(this.searchParams).then(res => {
                    this.tableLoading = false;
                    if (res.data.status === 200) {
                        this.tableData = res.data.res ? res.data.res.tableData : [];
                        this.tableHeader = res.data.res ? res.data.res.tableHeader : [];
                        const arr = [];
                        this.tableHeader.forEach(x => {
                            arr.push({
                                value: x.value,
                                key: x.key,
                                fixed: ['machineName'].includes(x.key) ? 'left' : '',
                                width: ['machineName'].includes(x.key) ? 120 : 110,
                                align: ['machineName'].includes(x.key) ? 'center' : 'center'
                            });
                            return x;
                        });
                        this.tableHeader = arr || [];
                    }
                });
            },
            /** 搜索按钮操作 */
            onSearchBtn() {
                this.getListRequest();
            },
            async getDependentData() {
                if (!this.searchParams.yearMonth) {
                    this.$set(this.searchParams, 'yearMonth', formatMonth(Date.now()));
                }
                this.workshopList = this.$store.state.user.userWorkshop.workshopList;
                this.processList = this.$store.state.user.userProcess.processList;
                // 默认值(页面缓存时，没有值的情况下再赋值)
                if (!this.searchParams.processCode) {
                    this.$set(this.searchParams, 'processCode', this.$store.state.user.userProcess.defaultProcessCode || '');
                }
                if (!this.searchParams.workshopId) {
                    this.$set(this.searchParams, 'workshopId', this.$store.state.user.userWorkshop.defaultWorkshopId);
                }
                this.getProcessData(this.$store.state.user.userWorkshop.defaultWorkshopId);
                await this.getListRequest();
            }
        },
        mounted() {
            this.getDependentData();
        }
    };
</script>
